<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">在线报名</li>
                    </ul>
                </div>
                <div class="border_content text_center special_apply_box" v-if="!specialSureApplyInfo">
                    <img src="/static/img/title1.png" class="contTitleImg">
                    <h3 class="apply_title">特种作业人员培训报名 </h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="special_apply_form specialConfirm" label-width="100px" style="width: 500px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project">
                            <el-select v-model="form.typeName" placeholder="选择专业" @change="typeChange">
                                <el-option v-for="(item,index) in tzgProducts" :key="index" :label="item.typeName"
                                    :value="item.typeName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left choose_project" label="选择学历：">
                            <el-select v-model="form.educationBackground" placeholder="请选择">
                                <el-option v-for="item in educations" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left" label="理论：">
                            <el-checkbox v-if="!String.isEmptyOrNUll(liluns.typeCode)" v-model="form.threoryProduct"
                                @change="lilunclick" >培训 {{liluns.ext.productPrice}}元
                            </el-checkbox>
                            <el-checkbox v-if="String.isEmptyOrNUll(liluns.typeCode)" v-model="form.threoryProduct" disabled>培训 0元
                            </el-checkbox>
                        </el-form-item>
                       <el-form-item class="text_left" label="实操：">
                            <el-checkbox v-if="!String.isEmptyOrNUll(shicaos.typeCode)" v-model="form.practicalProduct"
                                @change="shicaoclick" >培训 {{shicaos.ext.productPrice}}元
                            </el-checkbox>
                            <el-checkbox v-if="String.isEmptyOrNUll(shicaos.typeCode)"  v-model="form.practicalProduct" disabled>培训 0元
                            </el-checkbox>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model="form.invoiceTitle" readonly @focus="ticketDialogs = true"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>
                        <el-form-item style="margin-left: -140px;" class="checkAgree">
                            <el-checkbox v-model="checkAgree">已阅读并同意遵守<span @click="changeAgree"
                                    class="applyxieyi">《培训报名信息协议》</span></el-checkbox>
                        </el-form-item>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <a class="apply_return" @click="prev">返回</a>
                            <a @click="comfirmOrder">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 信息确认 -->
                <div class="border_content text_center special_apply_box" v-if="specialSureApplyInfo">
                    <img src="/static/img/title2.png" class="contTitleImg">
                    <h3 class="apply_title">特种作业人员培训报名</h3>
                    <h4 class="apply_title_explain">请确认您的报名信息</h4>
                    <el-form class="special_apply_form specialConfirm" label-width="100px" style="width: 500px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="报考专业：">
                            <p class="apply_p">{{form.typeName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left choose_project" label="学历：">
                            <el-select v-model="form.educationBackground" disabled>
                                <el-option v-for="item in educations" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left" label="理论：">
                            <el-checkbox v-model="form.threoryProduct" disabled>培训 {{form.threoryPrice}}元</el-checkbox>
                        </el-form-item>
                        <el-form-item class="text_left" label="实操：">
                            <el-checkbox v-model="form.practicalProduct" disabled>培训 {{form.practicalPrice}}元
                            </el-checkbox>
                        </el-form-item>
                        <el-form-item label="培训费：" class="choose_project">
                            <!-- <p class="apply_p">{{this.form.threoryPrice}}元</p> -->
                            <p class="apply_p">{{form.threoryPrice+form.practicalPrice}}元</p>
                        </el-form-item>
                        <el-form-item label="发票抬头：" class="choose_project">
                            <p class="apply_p">{{form.invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="choose_project">
                            <p v-if="form.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="form.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <p
                                style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">
                                提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="specialSureApplyInfo=false;">上一步</a>
                            <a @click="toPay">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!-- 选择发票 -->
            <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
        </header-footer>
        <!-- 协议弹框 -->
        <el-dialog title="培训报名协议信息" class="userXuXieDialog" center :visible.sync="checkAgreeDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <userXieyi></userXieyi>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="checkAgreeDialog = false">我已阅读并同意</el-button>
            </span>
        </el-dialog>
        <!-- 用户须知 -->
        <el-dialog title="特种作业持证人员个人考前培训报名须知" class="userXuXieDialog" center :visible.sync="userXuDialog">
            <div style="white-space: pre-wrap;" class="agreeCheckDialog">
                <tzgPerson></tzgPerson>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="userXuDialog = false">我知道了</el-button>
            </span>
        </el-dialog>
        <!-- ti-->
        <!-- <el-dialog title="提示" class="userXuXieDialog" center :visible.sync="tishiDialog">
            <div style="text-align: center;font-size: 26px;color: #ff0000;display: flex;justify-content: center;align-items: center;" class="agreeCheckDialog">
               由于场地原因，建筑电工，建筑焊工实操考前培训暂行取消，开放时间另行通知，谢谢！
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" class="xieyiBtn" @click="tishiDialog = false">我知道了</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
    var _this;
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import ticketDialog from '../../../components/invoice_lists.vue'
    import userXieyi from '../../../components/userExamXuZhi/user_xieyi.vue'
    import tzgPerson from '../../../components/userExamXuZhi/tzg_person.vue'
    export default {
        name: "tzg_apply",
        data: function() {
            return {
                tishiDialog: true,
                userXuDialog: true, //用户须知
                checkAgreeDialog: false, //用户协议弹框
                checkAgree: false,
                educations: [{
                        value: '0',
                        label: '初中'
                    },
                    {
                        value: '1',
                        label: '职高'
                    },
                    {
                        value: '2',
                        label: '高中'
                    },
                    {
                        value: '3',
                        label: '高技'
                    },
                    {
                        value: '4',
                        label: '中专'
                    },
                    {
                        value: '5',
                        label: '专科'
                    },
                    {
                        value: '6',
                        label: '本科'
                    },
                    {
                        value: '7',
                        label: '硕士'
                    },
                    {
                        value: '8',
                        label: '博士'
                    },
                    {
                        value: '9',
                        label: '其他'
                    }
                ],
                specialSureApplyInfo: false,
                webUser: {
                    realName: "",
                    identityCode: ""
                },
                form: {
                    typeCode: "",
                    educationBackground: '', //学历
                    threoryProductCode: "", //理论
                    practicalProductCode: "", //实操
                    invoiceTitle: "",
                    invoiceTempId: "",
                    invoiceType: "",
                    productCode: "",
                    threoryProduct: false,
                    practicalProduct: false,
                    threoryPrice: 0,
                    practicalPrice: 0
                },
                threoryPrice: 0,
                practicalPrice: 0,
                ticketDialogs: false, //选择发票
                noApplyRadio: false,
                tzgProducts: [],
                liluns:{
                    ext:{
                        productPrice:0
                    }
                },
                shicaos:{
                    ext:{
                        productPrice:0
                    }
                },
                singleProduct: []
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted: function() {
            var that = this;
            this.common.post(this.api.getCombApply, {}, function(res) {
                that.webUser = res.resultMap;
            });
            this.common.post(this.api.getProductUrl, {}, function(res) {
                _this.common.urlToJson(res.resultMap, function(data) {
                    data.forEach(item => {
                        if (item.typeCode == "tzgbm") {
                            item.children.forEach(v => {
                                _this.tzgProducts.push({
                                    "typeName": v.typeName,
                                    "children": v.children
                                });
                            })
                        }
                    });
                    // console.log(JSON.stringify(_this.tzgProducts))
                });
            });
        },
        methods: {
            shicaoclick: function(e) {
                if (e) {
                    this.form.practicalPrice = this.shicaos.ext.productPrice;
                    this.form.practicalProductCode = this.shicaos.typeCode;
                } else {
                    this.form.practicalProductCode = "";
                    this.form.practicalPrice = 0;
                }

            },
            lilunclick: function(e) {
                if (e) {
                    this.form.threoryPrice = this.liluns.ext.productPrice;
                    this.form.threoryProductCode = this.liluns.typeCode;
                } else {
                    this.form.threoryProductCode = "";
                    this.form.threoryPrice = 0;
                }
            },
            invoiceBtn: function(data) {
                this.form.invoiceTitle = data.invoiceTitle;
                this.form.invoiceType = data.invoiceType;
                this.form.invoiceTempId = data.invoiceTempId;
            },
            invoiceFunc: function() {
                this.$refs.invoiceChild.getInvoiceTemp();
            },
            typeChange: function(name) {
                this.liluns={};
                this.shicaos={};
                this.form.threoryProduct=false;
                this.form.practicalProduct=false;
                this.form.threoryProductCode="";
                this.form.practicalProductCode="";
                this.form.threoryPrice=0;
                this.form.practicalPrice=0;
                for (var i = 0; i < this.tzgProducts.length; i++) {
                    var item = this.tzgProducts[i];
                    if (item.typeName == name) {
                        for (var j = 0; j < item.children.length; j++) {
                            var v=item.children[j];
                            if(v.typeCode.indexOf('_llbp')!=-1){
                                _this.liluns=v;
                            }
                            if(v.typeCode.indexOf('_scbp')!=-1){
                                _this.shicaos=v;
                            }
                        }
                        break;
                    }
                }
            },
            changeAgree: function() {
                this.checkAgreeDialog = true;
            },
            comfirmOrder: function() {
                // console.log(JSON.stringify(this.form));
                if (String.isEmptyOrNUll(this.form.typeName)) {
                    this.$message.error("请选择专业！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.educationBackground)) {
                    this.$message.error("请选择学历！");
                    return;
                }
                if (this.form.threoryProductCode == "" && this.form.practicalProductCode == "") {
                    // this.$message.error("请选择理论！");
                    this.$message.error("请选择理论或实操！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.invoiceTempId)) {
                    this.$message.error("请选择发票！");
                    return;
                }
                if (!this.checkAgree) {
                    this.$message.error("请阅读并勾选报名协议！");
                    return;
                }
                // if (this.form.practicalProduct) {
                //     this.form.practicalProductCode = this.form.productCode + "_scbp";
                // } else {
                //     this.form.practicalProductCode = "";
                // }
                console.log(this.form);
                this.specialSureApplyInfo = true;
            },
            prev: function() {
                var that = this;
                this.common.toPage("/study/apply/exam_apply");
            },
            toPay: function() {
                var that = this;
                this.common.post(this.api.tzgExamApply, this.form, function(res) {
                    that.common.toPage("/home/apply/zhifubaopre/" + res.resultMap);
                });
            }
        },
        components: {
            headerFooter,
            ticketDialog,
            userXieyi,
            tzgPerson
        }
    }
</script>

<style>
    .el-checkbox {
        margin-right: 0;
    }

    .special_webucation_table td .el-checkbox__label {
        display: none;
    }

    .special_apply_box .el-tag {
        margin: 0 6px;
    }

    .faceEducation .el-form-item__label {
        width: 164px !important;
    }
</style>
